哇嗚!不知不覺已經過了29天，今天要來說說之前在flex系列(Day14)和grid系列(Day25)中有提到過的RWD響應式網頁設計，今天要來說一個不一樣方式的RWD響應式網，那依照慣例應該要簡單小複習一下前一篇的內容：
分開調整距離：grid-row-gap與grid-column-gap可以個別調整上下間距與左右間距。
整體廷整距離：grid-gap可以調整所有區塊之間的距離。
以上就是昨天的複習，有興趣的朋友可以去前一篇看看，那就開始今天的內容啦~

筆記區

一、RWD響應式網頁設計

RWD全名為Responsive Web Design，又稱作回應式網頁設計、對應式網頁設計，這屬於前端網頁設計技術的一環。響應式網頁設計是讓網站隨著不同瀏覽裝置的大小隨即做出不同的呈現方式，讓使用者可以舒適瀏覽網頁，不須自己調整大小。

二、Google建議使用RWD

之前在goolge搜尋中心發表的文章中有提到建議大家使用RWD，並列了以下6點原因：

• 使用者可以使用單一網址輕鬆分享網頁。
• 協助goolge演算法為網頁正確指定索引編列屬性，不須另外發送訊息指名既有的相對應電腦版或行動裝置版。
• 無須維護多個相同內容網址，節省工程師處理的時間。
• 降低行動網站出錯率。
• 使用者無需調整適合裝置大小，網頁會自行切換最適合的瀏覽畫面，並縮短載入時間。且減少使用者重新導向而厝的風險。
• Googlebot只需檢索網頁一次，即可擷取所有版本的內容。節省資源同時並提高效率，為網站中的更多內容建立索引，並確保擷取的內容是最新版本。

以上資料為回應式網頁設計| 搜尋中心 - Google Developers，有興趣的朋友可以點進去看看。

如何做出RWD

有別於以往提到過的flex和grid布局，今天要來說說@media系列，包括很多種類，最常使用的有三樣，分別為all(所有裝置), screen(電腦螢幕)與print(印表機裝置)，那我今天會以平常習慣使用的方式來做示範，@media screen and (max-width:) {}，基本上看到max-width大概就可以知道這是指最大寬度的部分，也就是說大於max-width的寬度，則不適用於max-width裡頭所設定的條件，這樣講可能還是不太清楚，所以直接來示範一次。

@media screen and (max-width: 1400px) {
    .box{
        width: 500px;
    }
}

在瀏覽器寬度為小於等於1400px的情況下，box元素的寬會變成500px，以此類推。

成果展示

參考資料

RWD是什麼？響應式CSS怎麼寫？5分鐘快速指南！ - Welly SEO
什麼是RWD響應式網頁設計？圖解說明讓你3分鐘搞懂手機版網站
網頁製作｜什麼是RWD響應式網頁設計-網站設計的趨勢- 愛貝斯
回應式網頁設計| 搜尋中心 - Google Developers
[CSS] Media Query 小撇步